[V0_FILE]plaintext:file="GooeyTextHoverEffect-master/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/GooeyTextHoverEffect-master/favicon-PQ8IbD2swXh9oGNAnJ4nEc18WDZ0QP.ico" [V0_FILE]plaintext:file="GooeyTextHoverEffect-master/src/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zip-blob/GooeyTextHoverEffect-master/src/favicon-CEVRvu6jzHueuJD5HSq8ts1pR8nPoX.ico" [V0_FILE]plaintext:file="LICENSE" MIT License Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. [V0_FILE]css:file="src/css/base.css" *, *::after, *::before { box-sizing: border-box; } :root { font-size: 18px; } body { margin: 0; --color-text: #fff; --color-bg: #c2c6c9; --color-link: #000; --color-link-hover: #000; --color-menu: #000; --fontsize-menu: 16px; --font-menu: titling-gothic-fb, sans-serif; color: var(--color-text); background-color: var(--color-bg); font-family: nimbus-sans-extended, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .demo-2 { --color-text: #fff; --color-bg: #000; --color-link: #ddd; --color-link-hover: #fff; --color-menu: #fff; --font-menu: hothouse, sans-serif; --fontsize-menu: 10px; } .demo-3 { --color-text: #fff; --color-bg: #e2c6cc; --color-link: #000; --color-link-hover: #fff; --color-menu: #000; --font-menu: laca-text, sans-serif; --fontsize-menu: 18px; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5, 0.5, 1); } } .hidden { opacity: 0; position: absolute; pointer-events: none; z-index: -1; } a { text-decoration: none; color: var(--color-link); outline: none; border-bottom: 2px solid; transition: border-color 0.1s; } a:hover, a:focus { color: var(--color-link-hover); outline: none; border-color: transparent; } main { padding: 3rem 5vw; position: relative; z-index: 1000; } .title { font-size: 1rem; margin: 0 0 1rem; font-weight: normal; } .links { display: inline; } .demos { margin: 1rem 0; } .demo--current, .demo--current:hover { border-color: transparent; } .text--menu { border: none; color: var(--color-link); margin: 1rem 0; } .credits a { color: currentColor; } .menu { width: 100%; min-height: 400px; display: grid; } .menu__item { border: none; transition: none; cursor: pointer; position: relative; } .menu__text { font-size: var(--fontsize-menu); fill: var(--color-menu); display: block; font-family: var(--font-menu); font-weight: 700; position: absolute; height: 120%; width: 100%; pointer-events: none; } .menu__text text { transform-origin: 50% 50%; transform-box: view-box; } .menu__text text:nth-child(2) { opacity: 0; } @media screen and (min-width: 53em) { main { position: fixed; z-index: 100; top: 0; left: 0; display: grid; justify-items: start; width: 100%; height: 100vh; padding: 2rem 3rem; grid-template-columns: 30% 30% 40%; grid-template-rows: auto 10vh auto 2fr 5rem; grid-template-areas: 'title text-menu text-subscribe' '... ... ...' 'links menu menu' 'demos menu menu' 'credits ... ...'; } .title { grid-area: title; margin: 0; } .demos { margin: 0; grid-area: demos; display: flex; flex-direction: column; } .demo, .links a { margin-bottom: 0.5rem; } .links { grid-area: links; display: flex; flex-direction: column; margin-bottom: 3rem; padding-top: 0.5rem; } .credits { margin: 0; grid-area: credits; align-self: end; } .text--menu { grid-area: text-menu; margin: 0; } .text--subscribe { grid-area: text-subscribe; justify-self: end; } .menu { grid-area: menu; } } [V0_FILE]html:file="src/index.html" Gooey Text Hover Effect | Demo 1 | Codrops

Gooey Text Hover Effect

Article GitHub

01 02 03

Inspired and based on this demo

[V0_FILE]html:file="src/index2.html" Gooey Text Hover Effect | Demo 1 | Codrops

Gooey Text Hover Effect

Article GitHub

01 02 03

Inspired and based on this demo

[V0_FILE]html:file="src/index3.html" Gooey Text Hover Effect | Demo 1 | Codrops

Gooey Text Hover Effect

Article GitHub

01 02 03

Inspired and based on this demo

[V0_FILE]javascript:file="src/js/demo1/index.js" import Menu from './menu'; import { preloadFonts } from '../utils'; // Preload typekit fonts preloadFonts('dba6omz').then(() => { document.body.classList.remove('loading'); }); const menu = new Menu(document.querySelector('nav.menu')); [V0_FILE]javascript:file="src/js/demo1/menu.js" import MenuItem from './menuItem'; export default class Menu { constructor(el) { this.DOM = {el: el}; this.items = []; [...this.DOM.el.querySelectorAll('.menu__item')].forEach(item => this.items.push(new MenuItem(item))); } } [V0_FILE]javascript:file="src/js/demo1/menuItem.js" import { gsap } from 'gsap'; export default class MenuItem { constructor(el) { this.DOM = {el: el}; this.DOM.textsGroupEl = this.DOM.el.querySelector('svg > g'); this.filterId = this.DOM.el.querySelector('svg filter').id; [this.DOM.text_1, this.DOM.text_2] = this.DOM.textsGroupEl.querySelectorAll('text'); this.DOM.feBlur = document.querySelector(`#${this.filterId} > feGaussianBlur`); this.primitiveValues = {stdDeviation: 0}; this.createTimeline(); this.initEvents(); } initEvents() { this.onMouseEnterFn = () => { this.DOM.textsGroupEl.style.filter = `url(#${this.filterId})`; this.tl.play(); } this.onMouseLeaveFn = () => { this.DOM.textsGroupEl.style.filter = `url(#${this.filterId})`; this.tl.reverse(); } this.DOM.el.addEventListener('mouseenter', this.onMouseEnterFn); this.DOM.el.addEventListener('mouseleave', this.onMouseLeaveFn); } createTimeline() { // init timeline this.tl = gsap.timeline({ paused: true, onComplete: () => { this.DOM.textsGroupEl.style.filter = 'none'; }, onReverseComplete: () => { this.DOM.textsGroupEl.style.filter = 'none'; }, onUpdate: () => { this.DOM.feBlur.setAttribute('stdDeviation', this.primitiveValues.stdDeviation) } }) .to(this.primitiveValues, { duration: 0.8, ease: "none", startAt: {stdDeviation: 0}, stdDeviation: 1 }, 0) .to(this.primitiveValues, { duration: 0.8, ease: "none", stdDeviation: 0 }) .to(this.DOM.text_1, { duration: 1.6, ease: "none", // Power1.easeInOut opacity: 0 }, 0) .to(this.DOM.text_2, { duration: 1.6, ease: "none", // Power1.easeInOut opacity: 1 }, 0); } } [V0_FILE]javascript:file="src/js/demo2/index.js" import Menu from './menu'; import { preloadFonts } from '../utils'; // Preload typekit fonts preloadFonts('dba6omz').then(() => { document.body.classList.remove('loading'); }); const menu = new Menu(document.querySelector('nav.menu')); [V0_FILE]javascript:file="src/js/demo2/menu.js" import MenuItem from './menuItem'; export default class Menu { constructor(el) { this.DOM = {el: el}; this.items = []; [...this.DOM.el.querySelectorAll('.menu__item')].forEach(item => this.items.push(new MenuItem(item))); } } [V0_FILE]javascript:file="src/js/demo2/menuItem.js" import { gsap } from 'gsap'; export default class MenuItem { constructor(el) { this.DOM = {el: el}; this.DOM.textsGroupEl = this.DOM.el.querySelector('svg > g'); this.filterId = this.DOM.el.querySelector('svg filter').id; [this.DOM.text_1, this.DOM.text_2] = this.DOM.textsGroupEl.querySelectorAll('text'); this.DOM.feBlur = document.querySelector(`#${this.filterId} > feGaussianBlur`); this.primitiveValues = {stdDeviation: 0}; this.createTimeline(); this.initEvents(); } initEvents() { this.onMouseEnterFn = () => { this.DOM.textsGroupEl.style.filter = `url(#${this.filterId})`; this.tl.play(); } this.onMouseLeaveFn = () => { this.DOM.textsGroupEl.style.filter = `url(#${this.filterId})`; this.tl.reverse(); } this.DOM.el.addEventListener('mouseenter', this.onMouseEnterFn); this.DOM.el.addEventListener('mouseleave', this.onMouseLeaveFn); } createTimeline() { // init timeline this.tl = gsap.timeline({ paused: true, onComplete: () => { this.DOM.textsGroupEl.style.filter = 'none'; }, onReverseComplete: () => { this.DOM.textsGroupEl.style.filter = 'none'; }, onUpdate: () => { this.DOM.feBlur.setAttribute('stdDeviation', this.primitiveValues.stdDeviation) } }) .to(this.primitiveValues, { duration: 0.5, ease: "none", startAt: {stdDeviation: 0}, stdDeviation: 1.5 }, 0) .to(this.primitiveValues, { duration: 0.5, ease: "none", stdDeviation: 0 }) .to(this.DOM.text_1, { duration: 1, ease: "none", // Power1.easeInOut opacity: 0 }, 0) .to(this.DOM.text_2, { duration: 1, ease: "none", // Power1.easeInOut opacity: 1 }, 0) .to(this.DOM.text_1, { duration: 1, ease: "Power2.easeInOut", x: 8 }, 0) .to(this.DOM.text_2, { duration: 1, ease: "Power2.easeInOut", startAt: {x: -8}, x: 0 }, 0); } } [V0_FILE]javascript:file="src/js/demo3/index.js" import Menu from './menu'; import { preloadFonts } from '../utils'; // Preload typekit fonts preloadFonts('dba6omz').then(() => { document.body.classList.remove('loading'); }); const menu = new Menu(document.querySelector('nav.menu')); [V0_FILE]javascript:file="src/js/demo3/menu.js" import MenuItem from './menuItem'; export default class Menu { constructor(el) { this.DOM = {el: el}; this.items = []; [...this.DOM.el.querySelectorAll('.menu__item')].forEach(item => this.items.push(new MenuItem(item))); } } [V0_FILE]javascript:file="src/js/demo3/menuItem.js" import { gsap } from 'gsap'; export default class MenuItem { constructor(el) { this.DOM = {el: el}; this.DOM.textsGroupEl = this.DOM.el.querySelector('svg > g'); this.filterId = this.DOM.el.querySelector('svg filter').id; [this.DOM.text_1, this.DOM.text_2] = this.DOM.textsGroupEl.querySelectorAll('text'); this.DOM.feBlur = document.querySelector(`#${this.filterId} > feGaussianBlur`); this.primitiveValues = {stdDeviation: 0}; this.createTimeline(); this.initEvents(); } initEvents() { this.onMouseEnterFn = () => { this.DOM.textsGroupEl.style.filter = `url(#${this.filterId})`; this.tl.play(); } this.onMouseLeaveFn = () => { this.DOM.textsGroupEl.style.filter = `url(#${this.filterId})`; this.tl.reverse(); } this.DOM.el.addEventListener('mouseenter', this.onMouseEnterFn); this.DOM.el.addEventListener('mouseleave', this.onMouseLeaveFn); } createTimeline() { // init timeline this.tl = gsap.timeline({ paused: true, onComplete: () => { this.DOM.textsGroupEl.style.filter = 'none'; }, onReverseComplete: () => { this.DOM.textsGroupEl.style.filter = 'none'; }, onUpdate: () => { this.DOM.feBlur.setAttribute('stdDeviation', this.primitiveValues.stdDeviation) } }) .to(this.primitiveValues, { duration: 0.4, ease: "none", startAt: {stdDeviation: 0}, stdDeviation: 1 }, 0) .to(this.primitiveValues, { duration: 0.4, ease: "none", stdDeviation: 0 }) .to(this.DOM.text_1, { duration: 0.8, ease: "none", // Power1.easeInOut opacity: 0 }, 0) .to(this.DOM.text_2, { duration: 0.8, ease: "none", // Power1.easeInOut opacity: 1 }, 0) .to(this.DOM.text_1, { duration: 0.8, ease: "Power1.easeInOut", y: -5 }, 0) .to(this.DOM.text_2, { duration: 0.8, ease: "Power1.easeInOut", startAt: {y: 5}, y: 0 }, 0); } } [V0_FILE]javascript:file="src/js/utils.js" // Preload images const preloadFonts = (id) => { return new Promise((resolve, reject) => { WebFont.load({ typekit: { id: id }, active: resolve }); }); }; export { preloadFonts }; [V0_FILE]typescriptreact:file="components/demo1.tsx" "use client" import { useEffect } from "react" import MenuItem from "./menu-item" const menuItems = [ { id: "goo-1", text1: "Cobain", text2: "1994-4-5", href: "https://archive.org/details/KurtCobainAcrossTheUniverseHD", }, { id: "goo-2", text1: "Morrison", text2: "1971-7-3", href: "https://www.youtube.com/watch?v=UGAb8WAmWOc", }, { id: "goo-3", text1: "Lennon", text2: "1980-12-8", href: "https://www.youtube.com/watch?v=YkgkThdzX-8", }, { id: "goo-4", text1: "Marley", text2: "1981-5-11", href: "https://www.youtube.com/watch?v=ld_UuPVPWNQ", }, ] const animationConfig = { blurDuration: 0.8, blurAmount: 1, textDuration: 1.6, ease: "none", } export default function Demo1() { useEffect(() => { // Set CSS variables for demo 1 document.documentElement.style.setProperty("--color-text", "#fff") document.documentElement.style.setProperty("--color-bg", "#c2c6c9") document.documentElement.style.setProperty("--color-link", "#000") document.documentElement.style.setProperty("--color-link-hover", "#000") document.documentElement.style.setProperty("--color-menu", "#000") document.documentElement.style.setProperty("--fontsize-menu", "16px") document.body.style.backgroundColor = "var(--color-bg)" document.body.style.color = "var(--color-text)" }, []) return ( ) } [V0_FILE]typescriptreact:file="components/demo2.tsx" "use client" import { useEffect } from "react" import MenuItem from "./menu-item" const menuItems = [ { id: "goo-1", text1: "Rexazyp", text2: "$1.4 billion", }, { id: "goo-2", text1: "Trabex", text2: "$2.3 billion", }, { id: "goo-3", text1: "XxVio", text2: "$0.65 billion", }, { id: "goo-4", text1: "Oxatser", text2: "$3 billion", }, ] const animationConfig = { blurDuration: 0.5, blurAmount: 1.5, textDuration: 1, ease: "none", movement: { x: 8 }, } export default function Demo2() { useEffect(() => { // Set CSS variables for demo 2 document.documentElement.style.setProperty("--color-text", "#fff") document.documentElement.style.setProperty("--color-bg", "#000") document.documentElement.style.setProperty("--color-link", "#ddd") document.documentElement.style.setProperty("--color-link-hover", "#fff") document.documentElement.style.setProperty("--color-menu", "#fff") document.documentElement.style.setProperty("--fontsize-menu", "10px") document.body.style.backgroundColor = "var(--color-bg)" document.body.style.color = "var(--color-text)" }, []) return ( ) } [V0_FILE]typescriptreact:file="components/demo3.tsx" "use client" import { useEffect } from "react" import MenuItem from "./menu-item" const menuItems = [ { id: "goo-1", text1: "Franklin", text2: "Jakarta", }, { id: "goo-2", text1: "Caroline", text2: "Moscow", }, { id: "goo-3", text1: "Andrew", text2: "London", }, { id: "goo-4", text1: "Jennifer", text2: "Toronto", }, ] const animationConfig = { blurDuration: 0.4, blurAmount: 1, textDuration: 0.8, ease: "none", movement: { y: 5 }, } export default function Demo3() { useEffect(() => { // Set CSS variables for demo 3 document.documentElement.style.setProperty("--color-text", "#fff") document.documentElement.style.setProperty("--color-bg", "#e2c6cc") document.documentElement.style.setProperty("--color-link", "#000") document.documentElement.style.setProperty("--color-link-hover", "#fff") document.documentElement.style.setProperty("--color-menu", "#000") document.documentElement.style.setProperty("--fontsize-menu", "18px") document.body.style.backgroundColor = "var(--color-bg)" document.body.style.color = "var(--color-text)" }, []) return ( ) } [V0_FILE]json:file="package.json" { "name": "gooey-text-hover-effect", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "14.0.0", "react": "^18", "react-dom": "^18", "gsap": "^3.12.2" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "postcss": "^8", "tailwindcss": "^3.3.0", "eslint": "^8", "eslint-config-next": "14.0.0" } } [V0_FILE]typescriptreact:file="components/menu-item.tsx" "use client" import { useRef, useEffect } from "react" import { gsap } from "gsap" interface MenuItemProps { filterId: string text1: string text2: string href?: string config: { blurDuration: number blurAmount: number textDuration: number ease: string movement?: { x?: number; y?: number } } viewBox: string textY: number } export default function MenuItem({ filterId, text1, text2, href, config, viewBox, textY }: MenuItemProps) { const itemRef = useRef(null) const text1Ref = useRef(null) const text2Ref = useRef(null) const groupRef = useRef(null) const timelineRef = useRef(null) const primitiveValues = useRef({ stdDeviation: 0 }) useEffect(() => { if (!itemRef.current || !text1Ref.current || !text2Ref.current || !groupRef.current) return const feBlur = document.querySelector(`#${filterId} > feGaussianBlur`) as SVGFEGaussianBlurElement if (!feBlur) return // Create timeline const tl = gsap.timeline({ paused: true, onComplete: () => { if (groupRef.current) { groupRef.current.style.filter = "none" } }, onReverseComplete: () => { if (groupRef.current) { groupRef.current.style.filter = "none" } }, onUpdate: () => { feBlur.setAttribute("stdDeviation", primitiveValues.current.stdDeviation.toString()) }, }) // Blur animation tl.to( primitiveValues.current, { duration: config.blurDuration, ease: config.ease, startAt: { stdDeviation: 0 }, stdDeviation: config.blurAmount, }, 0, ).to(primitiveValues.current, { duration: config.blurDuration, ease: config.ease, stdDeviation: 0, }) // Text opacity animation tl.to( text1Ref.current, { duration: config.textDuration, ease: config.ease, opacity: 0, }, 0, ).to( text2Ref.current, { duration: config.textDuration, ease: config.ease, opacity: 1, }, 0, ) timelineRef.current = tl // Event handlers const handleMouseEnter = () => { if (groupRef.current) { groupRef.current.style.filter = `url(#${filterId})` } tl.play() } const handleMouseLeave = () => { if (groupRef.current) { groupRef.current.style.filter = `url(#${filterId})` } tl.reverse() } const element = itemRef.current element.addEventListener("mouseenter", handleMouseEnter) element.addEventListener("mouseleave", handleMouseLeave) return () => { element.removeEventListener("mouseenter", handleMouseEnter) element.removeEventListener("mouseleave", handleMouseLeave) tl.kill() } }, [filterId, config, text1, text2]) const Component = href ? "a" : "div" const linkProps = href ? { href, target: "_blank", rel: "nofollow" } : {} return ( ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { font-size: 18px; --color-text: #fff; --color-bg: #000000; --color-link: #fff; --color-link-hover: #fff; --color-menu: #fff; --fontsize-menu: 16px; --font-menu: system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } body { margin: 0; color: #fff; background-color: #000000; font-family: system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ""; position: fixed; z-index: 1000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: #000000; } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; opacity: 0.4; background: #fff; animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5, 0.5, 1); } } .hidden { opacity: 0; position: absolute; pointer-events: none; z-index: -1; } a { text-decoration: none; color: inherit; outline: none; } a:hover, a:focus { outline: none; } /* Responsive adjustments */ @media screen and (max-width: 53em) { body { padding: 1rem; } main { position: relative !important; display: block !important; height: auto !important; padding: 3rem 5vw !important; } .menu { margin-top: 2rem; } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import { useEffect } from "react" import MenuItem from "@/components/menu-item" const menuItems = [ { id: "goo-1", text1: "v0", text2: "11/2023", href: "https://archive.org/details/KurtCobainAcrossTheUniverseHD", }, { id: "goo-2", text1: "Vercel", text2: "04/2020", href: "https://www.youtube.com/watch?v=UGAb8WAmWOc", }, ] const animationConfig = { blurDuration: 0.8, blurAmount: 1, textDuration: 1.6, ease: "none", } export default function Home() { useEffect(() => { // Set CSS variables document.documentElement.style.setProperty("--color-text", "#fff") document.documentElement.style.setProperty("--color-bg", "#000000") document.documentElement.style.setProperty("--color-menu", "#fff") document.documentElement.style.setProperty("--fontsize-menu", "48px") document.body.style.backgroundColor = "#000000" document.body.style.color = "#fff" }, []) return (

Morphing

) }

About

Tags

Share

About

Tags

Share

More from pohthedragonwarrior

More Templates Like This